<template>
  <el-drawer
    :title="title"
    :visible.sync="open"
    direction="rtl"
    custom-class="demo-drawer"
    ref="drawer"
    size="68%"
  >
    <div id="app">
      <div id="up_div_deatil">
        <div class="app-container">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="商品名称" prop="orderNo">
              <el-input
                v-model="queryParams.productName"
                placeholder="请输入商品名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="商品编码" prop="outboundOrderNo">
              <el-input
                v-model="queryParams.productCode"
                placeholder="请输入商品编码"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item label="入库时间" >
              <el-date-picker
                v-model="dateList"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div id="down_div">
        <div class="app-container">
          <divider title="商品明细"></divider>
            <el-table v-loading="loading" :data="tableData" border stripe >
              <el-table-column label="商品名称" align="center" prop="productName" />
              <el-table-column label="商品编码" align="center" prop="productCode" />
              <el-table-column label="商品规格" align="center" prop="productSpec" />
              <el-table-column label="仓库" align="center" prop="warehouseId" >
                <template slot-scope="scope">
                  {{ getSelectLabel(warehouseSelect,scope.row.warehouseId) }}
                </template>
              </el-table-column>
              <el-table-column label="库区" align="center" prop="warehouseAreaId" >
                <template slot-scope="scope">
                  {{ getSelectLabel(warehouseAreaSelect,scope.row.warehouseAreaId) }}
                </template>
              </el-table-column>
              <el-table-column label="货架" align="center" prop="warehouseRackId" >
                <template slot-scope="scope">
                  {{ getSelectLabel(warehouseRackSelect,scope.row.warehouseRackId) }}
                </template>
              </el-table-column>
              <el-table-column label="货位" align="center" prop="warehouseLocationId" >
                <template slot-scope="scope">
                  {{ getSelectLabel(warehouseLocationSelect,scope.row.warehouseLocationId) }}
                </template>
              </el-table-column>
              <el-table-column label="入库时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="账面库存" align="center" prop="totalQuantity" />
              <el-table-column label="盈亏数" align="center" prop="difference" />
              <el-table-column label="实际库存" align="center" prop="realTotalQuantity" />
            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
      </div>
    </div>

  </el-drawer>
</template>

<script>

import {getInboundProductsByPage} from "@/api/system/wmsOutbound";
import { getSupplierSelect,
  getWarehouseAreaSelect,
  getWarehouseSelect,
  getWarehouseRackSelect,
  getWmsWarehouseLocationSelect }  from "@/api/system/selectVo"
import divider from "@/components/divider/index.vue";

export default {
  name:"LookDetail",
  components: {divider},
  data(){
    return{
      title:"",
      open:false,
      tableData:[],
      loading:false,
      warehouseAreaSelect:[],
      warehouseSelect:[],
      warehouseRackSelect:[],
      warehouseLocationSelect:[],
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        operationId:"",
        productName:"",
        productCode:"",
        startTime:"",
        endTime:"",
      },
      // 总条数
      total: 0,
      // 显示搜索条件
      showSearch: true,
      dateList:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.getSelect();
  },
  methods:{
    show(row){
      this.title = "盘库单【"+row.inventoryCheckOrderNo+"】的商品明细"
      this.loading = true
      this.queryParams.operationId=row.id;

      this.resetQuery();
    },
    getList(){
      if(this.dateList){
        this.queryParams.startTime = this.dateList[0];
        this.queryParams.endTime = this.dateList[1];
      }
      getInboundProductsByPage(this.queryParams).then(response =>{
        this.tableData = response.rows.map(item => ({
          ...item,
          realTotalQuantity: item.realTotalQuantity ?? item.totalQuantity, // 如果为空则设为 1
          difference: item.realTotalQuantity - item.totalQuantity, // 同时初始化 difference
        }));
        this.open=true;
        this.total = response.total;
      });

      this.loading=false;
    },
    parseTime(time, format) {
      if (!time) return '-'
      const date = new Date(time)
      const y = date.getFullYear()
      const m = (date.getMonth() + 1).toString().padStart(2, '0')
      const d = date.getDate().toString().padStart(2, '0')
      const h = date.getHours().toString().padStart(2, '0')
      const i = date.getMinutes().toString().padStart(2, '0')
      const s = date.getSeconds().toString().padStart(2, '0')
      return `${y}-${m}-${d} ${h}:${i}:${s}`
    },
    getSelectLabel(selectList, id) {
      if (!selectList || !id) return '-'
      const item = selectList.find(i => i.value === id)
      return item ? item.label : (id || '-')
    },
    //获取下关的下拉框
    getSelect(){
      getSupplierSelect().then(response => {
        this.supplierSelect = response.data
      });
      getWarehouseAreaSelect().then(response => {
        this.warehouseAreaSelect = response.data
      });
      getWarehouseSelect().then(response => {
        this.warehouseSelect = response.data
      });
      getWarehouseRackSelect().then(response => {
        this.warehouseRackSelect = response.data
      });
      getWmsWarehouseLocationSelect().then(response => {
        this.warehouseLocationSelect = response.data
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.productName=null;
      this.queryParams.productCode=null;
      this.dateList = "";
      this.queryParams.startTime=null;
      this.queryParams.endTime=null;
      this.queryParams.pageNum=1;
      this.queryParams.pageSize=10;
      this.handleQuery()
    },
  }
}
</script>
<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  //background-color: #f4f4f4;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3px;
}

#up_div_deatil {
  background-color: white;
  height: 10%;
  width: 100%;
  margin-bottom: 20px; /* Space between the two divs */
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px; /* Optional rounded corners */
}

#down_div {
  background-color: white;
  height: 70%;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px; /* Optional rounded corners */
}
</style>
